import React from 'react'
import { Icon, Menu } from 'antd'
import MySubscriptionSerials from './my-subscription-serials-box'
import MySubscriptionVideos from './my-subscription-videos-box'
import MySubscriptionLayout from './my-subscription-layout'
import { withRouter } from 'react-router-dom'
import {connect} from 'react-redux'
import { getMySubscriptionSerials } from '../../actions/serial'
import { getMySubscriptionVideos } from '../../actions/video'


class MySubscriptionBody extends React.Component {
  state = {
    currentTab: 'serial'
  }
  componentDidMount = () => {
    this.props.getMySubscriptionSerials()
    this.props.getMySubscriptionVideos()
  }

  render () {
    const {currentTab} = this.state

    return <MySubscriptionLayout>
      <Menu
        onClick={e => this.setState({currentTab: e.key})}
        selectedKeys={[currentTab]}
        mode='horizontal'
        style={{marginBottom: 30}}
      >
        <Menu.Item key='serial'>
          <Icon type='appstore'/>课程系列
        </Menu.Item>
        <Menu.Item key='video'>
          <Icon type='play-circle'/>视频讲座
        </Menu.Item>
      </Menu>
      {
        currentTab === 'serial'
          ? <MySubscriptionSerials/>
          : <MySubscriptionVideos/>
      }
    </MySubscriptionLayout>
  }
}

const mapStateToProps = ({serials, user}) => ({serials, user})

const mapDispatchToProps = dispatch => ({
  getMySubscriptionSerials: () => dispatch(getMySubscriptionSerials()),
  getMySubscriptionVideos: () => dispatch(getMySubscriptionVideos()),
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MySubscriptionBody))
